import React from 'react';
import PropTypes from 'prop-types';
import { Spin } from 'antd';
import styles from './style.less';

class InfoTips extends React.Component {
  // 默认值
  static defaultProps = {
    width: '80%',
    height: '40px',
    RightBtn: false, //右侧是否有按钮
    Left: '', //左侧背景框中文字也可以是Reactnode
    Right: '', //右侧如果有按钮的按钮中的文字
    tipLoading: false, //左侧的信息根据接口返回进行挂载需要增加一个loading的效果,如果是静态的可以不传
  };
  render() {
    const { width, height, RightBtn, Left, Right, tipLoading, style } = this.props;
    let initStatus = !!Left;
    return (
      <Spin spinning={!initStatus}>
        <div className={styles.wrap} style={{ height: height }}>
          {initStatus ? (
            <>
              <div className={styles.leftWrap} style={!style ? { width: width } : { width: width, ...style }}>
                <Spin spinning={tipLoading}>{Left}</Spin>
              </div>
              {RightBtn ? <div>{Right}</div> : <></>}
            </>
          ) : (
            <div className={styles.leftWrap} style={{ width: width }}></div>
          )}
        </div>
      </Spin>
    );
  }
}
// props默认值
InfoTips.propsTypes = {
  RightBtn: PropTypes.Boolean, // 标题名
  Left: PropTypes.string, // 加载标题后面的其他元素（可以是ReactNode）
  Right: PropTypes.string, // 加载右侧其他元素（可以是ReactNode）
  width: PropTypes.string, //左侧bar的宽度
  height: PropTypes.string, //左侧bar的高度
};
export default InfoTips;
